<template>
  <view class="user-login">
    <view class="login-type">
      <view class="title">{{ tabMeta.title }}</view>
      <view class="type">
        <text @click="changeLoginType">{{ tabMeta.subTitle }}</text>
        <text class="iconfont icon-caret"></text>
      </view>
    </view>
    <!-- 账号验证 -->
    <account v-if="tabIndex === 0" />
    <!-- 手机验证 -->
    <mobile v-else />
  </view>
</template>
<script>
import account from '@/pages/login/components/account'
import mobile from '@/pages/login/components/mobile'
export default {
  components: {
    account,
    mobile,
  },
  data () {
    return {
      tabIndex: 0,
      tabMetas: [
        {
          title: '账号登录',
          subTitle: '手机号登陆',
        },
        {
          title: '手机号登录',
          subTitle: '账号登录',
        },
      ],
    }
  },
  methods: {
    changeLoginType () {
      console.log(1)
      this.tabIndex = Math.abs(this.tabIndex - 1)
    },
  },
  computed: {
    tabMeta () {
      return this.tabMetas[this.tabIndex]
    },
  },
}
</script>
<style lang="scss" scoped>
.user-login {
  padding: 66rpx;
}

.login-type {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  line-height: 1;
  margin: 40rpx 0 80rpx;

  .title {
    font-size: 48rpx;
    color: #2a2929;
  }

  .type {
    color: #ef4f3f;
    font-size: 32rpx;
    display: flex;
    align-items: center;
  }

  .icon-caret {
    font-size: 50%;
  }
}
</style>
